<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>评论页面</title>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $.ajax({
                type: "get",
                url: "/selectAll",
                dataType: "json",
                success: function(data) {
                    var tr="";
                    console.log(data);
                    $.each(data, function(index, comment) {
                        tr +="<div class='box'><p><span class='img'></span>"+comment.nickname+comment.createdatetime+"</p>"+
                                "<p>"+comment.content+"</p>"+"<p><span>回复</span><span class='right'>点赞"+comment.likenum+"</span></p></div>";
                        // tr+="<div>"+comment.content+"</div>";
                    });
                    $('#top').html(tr);
                }
            });

            $("#but").click(function () {
                $.ajax({
                    type: "post",
                    url: "/add",
                    data:{
                      content:$("#content").val(),
                      articleid:$("#articleid").text()
                    },
                    dataType: "json",
                    success: function(data){
                        if(data==1){
                            alert("成功添加！");
                        }
                    }
                });
            })
        });
    </script>
    <style>
        .box{
            border-bottom:1px gray solid;
            padding-bottom: 10px;

        }
        .img{
            border-radius: 6px;
            width: 20px;
            border: 1px gray solid;
            height: 20px;
        }

        .left{
            float: left;
        }

        .right{
            float: right;
        }

        .input{
            width: 300px;
            height: 40px;
            line-height: 40px;
        }
        #but{
            width: 80px;
            height: 40px;
            background-color: blue;

        }
    </style>
</head>
<body>

    <div>
        <h2 th:text="${article}"></h2>
        <p th:text="${articleid}" id="articleid"></p>
    </div>
    <div class="bigBox">
        <p>
            <input type="text" name="content" class="input" id="content">
            <button id="but">提交</button>
        </p>
    </div>
    <div id="top">

    </div>
</body>
</html>